// 引入库
import React, { memo, useState, useEffect } from 'react';
import { Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import { withRouter } from 'react-router-dom'
// 引入自己的方法、函数等
import { AppNav } from '../../constant/local-constant'

// 引入样式
import { AppHaderWapper } from './style';

import logo from '../../assets/images/logo.png'
import { NavLink } from 'react-router-dom';


function AppHeader(props) {
  // console.log('重新渲染');
  const [flag, setFlag] = useState()
  // setFlag(props.location.pathname.indexOf("player"))
  useEffect(() => { setFlag(props.location.pathname.indexOf("player")) })

  return (
    <>
      {flag != -1 ? "" : (<AppHaderWapper className="wrap AppHeaderCMP">
        <div className="AppHaderWapper_left">
          <img src={logo} alt="logo" title="logo"></img>
        </div>
        <div className="AppHaderWapper_center">
          {

            AppNav.map((item, index) => {
              return (
                <NavLink to={item.link} key={index} className={(props.location.pathname === item.link ? 'router_a' : '')}>{item.title}</NavLink>
              )
            })
          }
        </div>
        <div className="AppHaderWapper_right">
          <Input placeholder="搜索音乐、MV、歌单、用户" suffix={<SearchOutlined />} />
          <NavLink to="/login" className="login">登录</NavLink>
        </div>

      </AppHaderWapper>)}
    </>
  )
}
export default memo(withRouter(AppHeader))

